<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租房列表</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="app">
    <div style="float: right;">
        <el-link href="http://localhost:8003/editProfile" target="_blank">编辑个人资料</el-link>
    </div>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
            <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button @click="location.href = 'http://localhost:8002/rentorder'">我的订单</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column prop="houseTitle" header-align="center" align="center" label="房屋标题">
            <template slot-scope="scope">
                <el-link @click="rentitem(scope.row.rentId)" target="_blank">{{scope.row.houseTitle}}</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="housePrice" header-align="center" align="center" label="房屋价格">
        </el-table-column>
        <el-table-column prop="leaseType" header-align="center" align="center" label="租赁方式">
        </el-table-column>
        <el-table-column prop="houseLayout" header-align="center" align="center" label="房屋布局">
        </el-table-column>
        <el-table-column prop="houseOrientation" header-align="center" align="center" label="房屋朝向">
        </el-table-column>
        <el-table-column prop="estateId" header-align="center" align="center" label="小区id">
        </el-table-column>
        <el-table-column prop="houseImg" header-align="center" align="center" label="默认图片">
            <template slot-scope="scope">
                <img :src="scope.row.houseImg" alt="" width="150px" height="100px">
            </template>
        </el-table-column>
        <el-table-column prop="houseSize" header-align="center" align="center" label="房屋面积">
        </el-table-column>
        <el-table-column prop="floorNum" header-align="center" align="center" label="楼栋号">
        </el-table-column>
        <el-table-column prop="unitNum" header-align="center" align="center" label="单元号">
        </el-table-column>
        <el-table-column prop="houseNum" header-align="center" align="center" label="门牌号">
        </el-table-column>
        <el-table-column prop="leaseTrem" header-align="center" align="center" label="租期">
            <template slot-scope="scope">
                <span v-if="scope.row.leaseTrem == 1">待租</span>
                <span v-if="scope.row.leaseTrem == 2">出租中</span>
                <span v-if="scope.row.leaseTrem == 3">下架</span>
                <span v-if="scope.row.leaseTrem == 12">年租</span>
            </template>
        </el-table-column>
        <el-table-column prop="houseType" header-align="center" align="center" label="房源类型">
        </el-table-column>
        <el-table-column prop="houseStatus" header-align="center" align="center" label="房屋状态">
            <template slot-scope="scope">
                <span v-if="scope.row.houseStatus == 1">待租</span>
                <span v-if="scope.row.houseStatus == 2">出租中</span>
                <span v-if="scope.row.houseStatus == 3">下架</span>
                <span v-if="scope.row.houseStatus == 4">审核中</span>
            </template>
        </el-table-column>
        <el-table-column prop="userName" header-align="center" align="center" label="出租人">
        </el-table-column>
        <el-table-column prop="userPhone" header-align="center" align="center" label="出租人手机">
        </el-table-column>
        <el-table-column prop="createTime" header-align="center" align="center" label="发布时间">
        </el-table-column>
        <el-table-column prop="maintenanceTime" header-align="center" align="center" label="维护时间">
        </el-table-column>
        <el-table-column prop="houseFacility" header-align="center" align="center" label="配套设施">
        </el-table-column>
        <!-- <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.rentId)">修改</el-button>
                <el-button type="text" size="small" @click="deleteHandle(scope.row.rentId)">删除</el-button>
            </template>
        </el-table-column> -->
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                   :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                dataForm: {
                    key: '',
                    listFlag: "",
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
            }
        },
        created() {
            this.getDataList()
            axios.defaults.withCredentials = true;
        },
        methods: {
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                axios.get(`http://localhost:88/api/house/house-rent/list?page=${this.pageIndex}&limit=${this.pageSize}`).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 房屋详情
            rentitem(rentId) {
                location.href = "http://localhost:8001/zufang/" + rentId + ".html";
            }
        },
    })
</script>

</html>